import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter01/widgets/dashLine.dart';
import 'colors.dart' as color;

class VideoInfo extends StatefulWidget {
  @override
  _VideoInfoState createState() => _VideoInfoState();
}

class _VideoInfoState extends State<VideoInfo> {
  List _info = [];

  @override
  void initState() {
    _getVideoData();
    super.initState();
  }

  _getVideoData() {
    DefaultAssetBundle.of(context)
        .loadString("lib/pages/training/json/videoinfo.json")
        .then((value) {
      setState(() {
        _info = json.decode(value);
        // print(_info);
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(colors: [
            color.AppColor.gradientFirst.withOpacity(0.9),
            color.AppColor.gradientSecond,
          ], begin: FractionalOffset(0, 0.4), end: Alignment.topRight),
        ),
        child: Column(
          children: [
            SafeArea(
              bottom: false,
              child: Container(
                  padding: EdgeInsets.only(
                    left: 20,
                    right: 20,
                    top: 10,
                  ),
                  width: MediaQuery.of(context).size.width,
                  height: 300,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        children: [
                          GestureDetector(
                            onTap: () {
                              Navigator.pop(context, "video info back");
                            },
                            child: Icon(Icons.arrow_back_ios,
                                size: 20,
                                color: color.AppColor.secondPageIconColor),
                          ),
                          Expanded(child: Container()),
                          Icon(Icons.info_outline,
                              size: 20,
                              color: color.AppColor.secondPageIconColor),
                        ],
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: 30),
                        child: RichText(
                          text: TextSpan(
                              text: "Legs Toning\n",
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 20,
                              ),
                              children: [TextSpan(text: 'and Glutes Workout')]),
                        ),
                      ),
                      SizedBox(height: 100),
                      Row(
                        children: [
                          Container(
                              width: 100,
                              height: 30,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(15),
                                  gradient: LinearGradient(
                                    colors: [
                                      color.AppColor
                                          .secondPageContainerGradient1stColor,
                                      color.AppColor
                                          .secondPageContainerGradient2ndColor,
                                    ],
                                    begin: Alignment.bottomCenter,
                                    end: Alignment.topRight,
                                  )),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Icon(Icons.timer,
                                      size: 20,
                                      color:
                                          color.AppColor.secondPageIconColor),
                                  SizedBox(width: 5),
                                  Text("68 min",
                                      style: TextStyle(
                                          fontSize: 15,
                                          color: color
                                              .AppColor.secondPageIconColor))
                                ],
                              )),
                          Container(
                              margin: EdgeInsets.only(left: 15),
                              width: 230,
                              height: 30,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(15),
                                  gradient: LinearGradient(
                                    colors: [
                                      color.AppColor
                                          .secondPageContainerGradient1stColor,
                                      color.AppColor
                                          .secondPageContainerGradient2ndColor,
                                    ],
                                    begin: Alignment.bottomCenter,
                                    end: Alignment.topRight,
                                  )),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Icon(Icons.handyman_outlined,
                                      size: 20,
                                      color:
                                          color.AppColor.secondPageIconColor),
                                  SizedBox(width: 5),
                                  Text(
                                    "Resistent band,kettebell",
                                    style: TextStyle(
                                        fontSize: 15,
                                        color:
                                            color.AppColor.secondPageIconColor),
                                  )
                                ],
                              ))
                        ],
                      )
                    ],
                  )),
            ),
            Expanded(
              child: Container(
                  padding: EdgeInsets.only(top: 30, left: 20, right: 15),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius:
                          BorderRadius.only(topRight: Radius.circular(70))),
                  child: Column(
                    children: [
                      Row(
                        children: [
                          Text(
                            "Circuit 1: Legs Toning",
                            style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.bold,
                              color: color.AppColor.circuitsColor,
                            ),
                          ),
                          Expanded(child: Container()),
                          Row(
                            children: [
                              Icon(Icons.loop,
                                  size: 30, color: color.AppColor.loopColor),
                              SizedBox(width: 10),
                              Text(
                                "3 sets",
                                style: TextStyle(
                                    fontSize: 15,
                                    color: color.AppColor.setsColor),
                              ),
                            ],
                          )
                        ],
                      ),
                      SizedBox(height: 10),
                      Expanded(
                        child: ListView.builder(
                          padding: EdgeInsets.only(
                              top: 0,
                              bottom: MediaQuery.of(context).padding.bottom),
                          itemCount: _info.length,
                          itemBuilder: (context, index) {
                            return GestureDetector(
                              onTap: () {
                                debugPrint(index.toString());
                              },
                              child: Container(
                                height: 135,
                                padding: EdgeInsets.only(right: 10),
                                // clipBehavior: Clip.hardEdge,
                                // decoration: BoxDecoration(border:Border.all(color:Colors.red)),
                                child: Column(children: [
                                  Row(
                                    children: [
                                      Container(
                                        width: 80,
                                        height: 80,
                                        clipBehavior: Clip.hardEdge,
                                        decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(10),
                                        ),
                                        child: Image.asset(
                                          _info[index]["thumbnail"],
                                          fit: BoxFit.fill,
                                        ),
                                      ),
                                      SizedBox(width: 10),
                                      Column(
                                        mainAxisAlignment:
                                            MainAxisAlignment.center,
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          Text(_info[index]["title"],
                                              style: TextStyle(
                                                fontSize: 18,
                                                fontWeight: FontWeight.bold,
                                              )),
                                          SizedBox(height: 10),
                                          Text(_info[index]["time"],
                                              style: TextStyle(
                                                  fontSize: 14,
                                                  color: Colors.grey[500])),
                                        ],
                                      )
                                    ],
                                  ),
                                  SizedBox(height: 18),
                                  Row(
                                    children: [
                                      Container(
                                        width: 80,
                                        height: 20,
                                        decoration: BoxDecoration(
                                          color: Color(0xFFeaeefc),
                                          borderRadius:
                                              BorderRadius.circular(10),
                                        ),
                                        alignment: Alignment.center,
                                        child: Text(
                                          "15s rest",
                                          style: TextStyle(
                                            color: Color(0xFF839fed),
                                          ),
                                        ),
                                      ),
                                      Expanded(
                                        child: DashLine(
                                          color: Color(0xFF839fed),
                                          dashWidth: 3,
                                        ),
                                      )
                                    ],
                                  ),
                                ]),
                              ),
                            );
                          },
                        ),
                      ),
                    ],
                  )),
            )
          ],
        ),
      ),
    );
  }
}
